import './ModifyPossword.scss'
import '../../Utils/FormTemp.scss'
import { useRequest } from 'alova/client';
import { Form, Input, Button, Alert, App } from 'antd';
import { Http } from '../../Utils/Api';
import { useState } from 'react';

const ModifyPossword = ({ Off }) => {
    const { notification } = App.useApp()
    const [Loading, setLoading] = useState(false)

    const { send } = useRequest(params => Http({ url: 'posUsersChangePassword', params }), { immediate: false })

    // 
    const [form] = Form.useForm();

    const onFinish = (e) => {
        delete e.NewPasswordTwo
        setLoading(true)
        send(e).then(() => {
            notification.success({ key: 'success', message: '操作成功', description: '已成功修改密码,请牢记新密码', })
            Off()
        }).catch(() => setLoading(false))
    }

    return (
        <div className='ModifyPossword FormTemplate'>
            <Form
                form={form}
                className='FormTemp'
                name="dependencies"
                autoComplete="off"
                layout="vertical"
                onFinish={onFinish}
            >
                <Alert message="密码必须包含一个大写字母一个小写字母和数字组成" type="info" showIcon />
                <Form.Item label="原密码" name="OldPassword" rules={[{ required: true }]}>
                    <Input.Password />
                </Form.Item>
                <Form.Item label="新密码" name="NewPassword" rules={[{ required: true }]}>
                    <Input.Password />
                </Form.Item>
                {/* Field */}
                <Form.Item
                    label="确认新密码"
                    name="NewPasswordTwo"
                    dependencies={['NewPassword']}
                    rules={[
                        { required: true },
                        ({ getFieldValue }) => ({
                            validator(_, value) {
                                if (!value || getFieldValue('NewPassword') === value) {
                                    return Promise.resolve();
                                }
                                return Promise.reject(new Error('两次密码输入不一致'));
                            },
                        }),
                    ]}
                >
                    <Input.Password />
                </Form.Item>
                <div>
                    <Button type="primary" size='large' block htmlType="submit" loading={Loading}>保存信息</Button>
                </div>
            </Form>
        </div>
    );
};

export default ModifyPossword;